<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="${basePath}/css/bootstrap.css">
    <script type="text/javascript" src="${basePath}/script/jquery-3.5.1.js"></script>


    <style type="text/css">
        .detail-div-1 div {
            margin-left: 10px;
            margin-top: 10px;
            line-height: 30px;
            border: 1px solid gray;
            color: gray;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div class="container" style="margin-top: 30px">
    <div class="row" id="showDetailId">
        <div class="col-md-5">
            <div id="myCarousel" class=" carousel slide ">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner" data>
                    <div class="item active">
                        <img src="${basePath}/images/goods/4.jpg" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="${basePath}/images/goods/3.jpg" alt="Second slide">
                    </div>
                    <div class="item">
                        <img src="${basePath}/images/goods/2.jpg" alt="Third slide">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev"
                   style="background:none;display:flex;align-items:center;justify-content:center;font-size:30px">&laquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next"
                   style="background:none;display:flex;align-items:center;justify-content:center;font-size:30px">&raquo;</a>
            </div>
        </div>

        <div class="col-md-6" style="margin-left: 30px">
            <div class="row">
                <span style="font-size:30px;font-family: 黑体">${gd.goods.goodsName}</span>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <span style="font-size: 12px;color: orangered">「火爆抢购中，最高享24期免息，低至221元起/期；加149元得199元55W立式风冷无线充；加69元得皮革保护壳」</span>
                    <span style="font-size: 12px;color: gray"> 120X 超远变焦 / 120W 秒充科技 / 120Hz刷新率 + 240Hz采样率 / 骁龙865旗舰处理器 / 双模5G / 10倍光学变焦 /
                    OIS光学防抖+EIS数字防抖 / 2000万超清前置相机 / 双串蝶式石墨烯基锂离子电池 / 等效4500mAh大电量 / 120W
                       有线秒充+50W无线秒充+10W无线反充 / WiFi 6 / 多功能NFC / 红外遥控</span>
                </div>
            </div>

            <div class="row">
                <span style="font-size: 35px;color: red">￥${gd.goods.goodsPrice}</span>
            </div>

            <div class="row">
                选择颜色：<br>
                <div class="col-md-6 text-center">
                    <div class="row detail-div-1">

                        <c:forEach items="${gd.colorList}" var="color">
                            <div class="col-md-5 table-bordered">${color.colorname}</div>
                        </c:forEach>

                    </div>
                </div>
            </div>

            <div class="row" style="font-size: 15px">
                选择版本：<br>
                <div class="col-md-6 text-center">
                    <div class="row detail-div-1">
                        <c:forEach items="${gd.versionList}" var="version">
                            <div class="col-md-5 table-bordered">${version.versionName}</div>
                        </c:forEach>


                    </div>
                </div>
            </div>

            <div style="margin-top: 30px">
                数量：<input type="number" min="1" max="10" value="1">库存（<span>${gd.goods.goodsCount}</span>）件
            </div>

            <div style="margin-top: 30px">
                <button class="btn btn-primary">加入购物车</button>
                <a href="shoppingCar.html" target="showFrame">
                    <button class="btn btn-primary">立即购买</button>
                </a>
            </div>
        </div>
    </div>
</div>
<hr>
<div class="container">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-1 text-center">
                    <img src="${basePath}/images/user/5.jpg" width="60px"><br>
                    (匿名)
                </div>
                <div class="col-md-10" style="border-bottom: 1px dashed gray">
                    <div style="line-height: 30px">好用的不得了</div>
                    <div style="color: gray;font-size: 12px;line-height: 30px"> 2020-05-20 05:20:00　　　商品名:蜗牛10plus
                        颜色:土豪金 版本类型:256G+12G
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-1 text-center">
                    <img src="${basePath}/images/user/6.jpg" width="60px"><br>
                    (匿名)
                </div>
                <div class="col-md-10" style="border-bottom: 1px dashed gray">
                    <div style="line-height: 30px">好用的不得了</div>
                    <div style="color: gray;font-size: 12px;line-height: 30px"> 2020-05-20 05:20:00　　　商品名:蜗牛10plus
                        颜色:土豪金 版本类型:256G+12G
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-1 text-center">
                    <img src="${basePath}/images/user/7.jpg" width="60px"><br>
                    (匿名)
                </div>
                <div class="col-md-10" style="border-bottom: 1px dashed gray">
                    <div style="line-height: 30px">好用的不得了</div>
                    <div style="color: gray;font-size: 12px;line-height: 30px"> 2020-05-20 05:20:00　　　商品名:蜗牛10plus
                        颜色:土豪金 版本类型:256G+12G
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<hr>
<div class="container">
    <div class="row">
        <div style="text-align: center">
            <span style="font-size: 30px">-----看了又看-----</span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="text-center show" style="width: 20%;float: left;padding: 0px">
                <a href="details.html"><img src="${basePath}/images/goods/1.jpg" style="width:150px"></a>
                <p>蜗牛1s</p>
                <p>￥598.00</p>
            </div>
            <div class="text-center show" style="width: 20%;float: left;padding: 0px">
                <a href="details.html"><img src="${basePath}/images/goods/2.jpg" style="width:150px"></a>
                <p>蜗牛1s</p>
                <p>￥598.00</p>
            </div>
            <div class="text-center show" style="width: 20%;float: left;padding: 0px">
                <a href="details.html"><img src="${basePath}/images/goods/3.jpg" style="width:150px"></a>
                <p>蜗牛1s</p>
                <p>￥598.00</p>
            </div>
            <div class="text-center show" style="width: 20%;float: left;padding: 0px">
                <a href="details.html"><img src="${basePath}/images/goods/4.jpg" style="width:150px"></a>
                <p>蜗牛1s</p>
                <p>￥598.00</p>
            </div>
            <div class="text-center show" style="width: 20%;float: left;padding: 0px">
                <a href="details.html"><img src="${basePath}/images/goods/5.jpg" style="width:150px"></a>
                <p>蜗牛1s</p>
                <p>￥598.00</p>
            </div>

        </div>
    </div>
</div>
</div>
<script type="text/javascript" src="${basePath}/script/bootstrap.js"></script>
</body>
</html>